<script setup lang="ts">
import { useEcharts } from '@/hooks/useEcharts';
import { Card } from 'ant-design-vue';
import { reactive, computed } from 'vue';

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    theme?: string;
    bgColor?: string;
    title: string;
    subtitle: string;
    data: any[];
  }>(),
  {
    width: '100%',
    height: '260px',
    data: () => []
  }
);
const isDarkText = computed(() => {
  return props.theme === 'dark' ? '#000' : '#fff';
});
const series = computed(() => {
  let arr = [
    {
      name: '单位：元',
      data: props.data,
      type: 'pie',
      emphasis: {
        itemStyle: {
          shadowBlur: 10, // 图形阴影模糊大小
          shadowOffsetX: 0, // 阴影模糊偏移距离
          shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
        }
      }
    }
  ];
  return arr;
});
const option = reactive({
  backgroundColor: props.bgColor,
  title: {
    text: props.title,
    subtext: props.subtitle,
    left: 'left',
    textStyle: {
      color: isDarkText
    },
    subtextStyle: {
      color: isDarkText
    }
  },
  tooltip: {
    trigger: 'item'
  },
  series: series
});

const { chartRef } = useEcharts({ props, option });
</script>

<template>
  <Card>
    <div
      ref="chartRef"
      :style="{ width: props.width, height: props.height }"
    ></div>
  </Card>
</template>

<style scoped></style>
